<template>
    <div class="main_content">
        <div class="scorll">
            <div class="content">
                <div class="search">
                    <el-button :type="warnList.length ===0?'info':'primary'" @click="updateRow(0)" size="small" plain :disabled="warnList.length ===0 || !btnList.includes('fse/crane/warnSetting/receive')">管理消息接收人</el-button>
                </div>
                <div class="table">
                    <el-table :data="tableData" style="width: 100%" :stripe='true' @select="listSelectOne" @select-all="listSelectALL">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column prop="name" label="报警类型" width="200px">
                        </el-table-column>
                        <!-- <el-table-column label="短信接收">
                            <template slot-scope="scope">
                                <span v-if="scope.row.msgChannelList.includes(4)">√</span>
                                <span v-else> x </span>
                            </template>
                        </el-table-column> -->
                        <el-table-column label="APP接收">
                            <template slot-scope="scope">
                                <span v-if="scope.row.msgChannelList.includes(1)">√</span>
                                <span v-else> x </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="后台接收">
                            <template slot-scope="scope">
                                <span v-if="scope.row.msgChannelList.includes(3)">√</span>
                                <span v-else> x </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="消息接收人" prop="nickName" width="300px">
                        </el-table-column>
                        <el-table-column label="操作" width="150px" fixed="right" align="center">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="updateRow(1, scope.$index, tableData)" type="text" size="small" :disabled="!btnList.includes('fse/crane/warnSetting/edit')">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <Modal v-model="updateModal" :title="isAdd ? '管理消息接收人' : '编辑消息接收人'" width="660px;" :mask-closable="false">
            <div class="ask">
                <span>通知方式:</span>
                <el-checkbox-group v-model="checkList">
                    <!-- <el-checkbox label="短信通知"></el-checkbox> -->
                    <el-checkbox label="APP通知"></el-checkbox>
                    <el-checkbox label="后台通知"></el-checkbox>
                </el-checkbox-group>
            </div>
            <el-transfer v-model="list" :data="msgList" :titles="['所有接收人员', '已有接收人员']"></el-transfer>
            <div slot="footer">
                <el-button @click="cancel(0)" type="info" size="small" plain>取消</el-button>
                <el-button @click="suBmitAll" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getFseRuleList,
    getFseRuleSetUser,
    getMsgRuleAvailableUsers
} from "@/api/api.js";
export default {
    name:"warnSetting",
    props:{
        type:{
            type: Number,
            default: ''
        }
    },
    data() {
        return {
            deptId: "",
            list: [],
            msgList: [],
            tableData: [],
            isAdd: false,
            updateModal: false,
            count: 0,
            updataID: "",
            warnList: [],
            checkList: [],
            btnList:'',
            TZList: [
                {
                    id: 1,
                    name: "APP通知"
                },
                {
                    id: 2,
                    name: "公众号通知"
                },
                {
                    id: 3,
                    name: "后台通知"
                },
                {
                    id: 4,
                    name: "短信通知"
                }
            ],
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getList();
            }
        }
    },
    methods: {
        getList() {
            this.tableData = [];
            let parmas = {
                deptId: this.deptId,
                type: this.type,
            };
            getFseRuleList(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data.list;
                        for (let i in this.tableData) {
                            let operEmpNameStr = [];
                            for (let j in this.tableData[i].userList) {
                                operEmpNameStr.push(this.tableData[i].userList[j].nickName);
                                this.tableData[i]["nickName"] = operEmpNameStr.join(",");
                            }
                        }
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getuserList(arr) {
            this.msgList = [];
            let parmas = {
                deptId: this.deptId
            };
            getMsgRuleAvailableUsers(parmas)
                .then(res => {
                    if (res.code == 200) {
                        let list = res.data.list;
                        let newobj = {};
                        list =list.reduce((preVal,curVal)=>{newobj[curVal.userId]?'':newobj[curVal.userId]=preVal.push(curVal);
                            return preVal
                         },[]);
                        for (let i in list) {
                            this.msgList.push({
                                key: i.toString(),
                                label: list[i].nickName + list[i].phone,
                                userId: list[i].userId,
                                phone: list[i].phone,
                                username: list[i].username,
                                nickName: list[i].nickName
                            });
                        }
                        if (!this.isAdd) {
                            this.list = [];
                            for (var i = 0; i < arr.length; i++) {
                                for (var j = 0; j < this.msgList.length; j++) {
                                    if (arr[i].userId == this.msgList[j].userId) {
                                        this.list.push(j.toString());
                                    }
                                }
                            }
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        updateRow(type, index, rows) {
            if (type == 0) {
                this.isAdd = true;
                this.checkList = [];
                this.list = [];
                this.getuserList();
            } else if (type == 1) {
                this.isAdd = false;
                this.checkList = [];
                for (let i in rows[index].msgChannelList) {
                    for (let j in this.TZList) {
                        if ( rows[index].msgChannelList[i] == this.TZList[j].id) {
                            this.checkList.push(this.TZList[j].name);
                        }
                    }
                }
                this.getuserList(rows[index].userList);
                this.updataID = rows[index].ruleId;
            }
            this.updateModal = true;
        },
        suBmitAll() {
            var arr = [];
            for (let i in this.list) {
                for (let j in this.msgList) {
                    if (this.list[i] == this.msgList[j].key) {
                        arr.push({
                            userId: this.msgList[j].userId,
                            nickName: this.msgList[j].nickName,
                            phone: this.msgList[j].phone
                        });
                    }
                }
            }
            let msgChannelList = [];
            for (let i in this.checkList) {
                for (let j in this.TZList) {
                    if (this.checkList[i] == this.TZList[j].name) {
                        msgChannelList.push(this.TZList[j].id);
                    }
                }
            }
            let parmas;
            let idList = [];
            if (this.isAdd) {
                this.warnList.forEach(i => {
                    idList.push(i.ruleId);
                });
                parmas = {
                    ruleIdList: idList,
                    userList: arr,
                    msgChannelList: msgChannelList
                };
            } else {
                parmas = {
                    ruleIdList: [this.updataID],
                    userList: arr,
                    msgChannelList: msgChannelList
                };
            }
            getFseRuleSetUser(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.updateModal = false;
                        this.$Message.success("操作成功");
                        this.pageNum = 1;
                        this.getList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        cancel(type) {
            if (type == 0) {
                this.updateModal = false;
            }
        },
        //多选
        listSelectOne(selection, row) {
            this.warnList = selection;
        },
        //全选
        listSelectALL(selection, row) {
            this.warnList = selection;
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getList();
    }
};
</script>
<style lang="less" scoped>
@import "./../../assets/style/slider.less";
@import "./../../assets/style/themeBase.less";
/deep/.el-table__row{
    background-color: #F1F4F7 ;
}
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td{
    background-color: #FDFDFD ;
}
.tag {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    position: relative;
    .msg {
        width: 200px;
        margin-left: 255px;
    }
    .btn {
        width: 150px;
        position: absolute;
        right: 0;
    }
}
.ask {
    width: 100%;
    margin: 0 auto;
    display: flex;
    height: 30px;
    justify-content: flex-start;
    align-items: center;
    border-radius: 20px;
    border: 1px solid #e5e5e5;
    margin-bottom: 10px;
    span {
        margin-right: 10px;
        margin-left: 10px;
    }
}
</style>
